<!--错误日志-->
<template>
  <div id="errorLog" class="app-container">
    <!--搜索条件-->
    <div class="filter-container">
      <el-form :model="listQuery" :inline="true">
        <el-form-item label="用户名">
          <el-input v-model="listQuery.userName" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="listQuery.realName" placeholder="请输入真实姓名" />
        </el-form-item>
        <el-form-item label="IP">
          <el-input v-model="listQuery.ip" placeholder="请输入操作IP地址" />
        </el-form-item>
        <el-form-item label="请求码">
          <el-input v-model="listQuery.requestId" placeholder="请输入请求码" />
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker v-model="dateTime" type="datetimerange" value-format="timestamp" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" plain @click="handleFilter">搜索</el-button>
          <el-button icon="el-icon-refresh" plain @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table-container flex-main">
      <div class="table-container-header">
        <table-toolbar :create="false" @refresh="handleFilter" @remove="removeRecord">
          <el-button plain icon="el-icon-brush" @click="clearRecord()">全部清空</el-button>
        </table-toolbar>
      </div>
      <!--列表-->
      <el-table
        ref="multipleTable"
        class="flex-main"
        :data="systemExceptionLogs"
        header-cell-class-name="table-header"
        fit
        height="100%"
        highlight-current-row
        @row-click="handleRowClick"
        @filter-change="handleFilterHandler"
        @selection-change="handleSelectionChange"
        @sort-change="sortChange">
        <el-table-column type="selection" sortable width="50" />
        <el-table-column align="center" prop="id" label="#" width="60">
          <template slot-scope="scope">{{ scope.$index+1 }}</template>
        </el-table-column>
        <el-table-column label="状态" prop="dealStatus" width="90" align="left" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.dealStatus=== 0 " class="color-danger ">
              未处理
              &nbsp;&nbsp;
              <button-option v-if="scope.row.dealStatus=== 0 " icon="el-icon-setting" skin="danger" title="处理" @click="handleDealExceptionLog(scope.row)" />
            </span>
            <span v-else class="color-primary">
              已处理
              &nbsp;&nbsp;
              <el-tooltip class="item" effect="dark" placement="bottom">
                <div slot="content">
                  处理人:{{ scope.row.dealUserInfo }}
                  <br>
                  <br>
                  处理结果:{{ scope.row.dealDesc }}
                </div>
                <i class="el-icon-setting common-cursor" />
              </el-tooltip>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="请求码" prop="requestId" width="150" align="left" header-align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.requestId" class="color-primary common-cursor" @click="handleLook(scope.row.id)">{{ scope.row.requestId }}</span>
            <span v-else class="color-danger common-cursor" @click="handleLook(scope.row.id)">无请求码</span>
          </template>
        </el-table-column>
        <el-table-column label="错误描述" prop="result" min-width="240" align="left" header-align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span class="color-danger">{{ scope.row.errorClass }}</span>【{{ scope.row.description }}】
          </template>
        </el-table-column>
        <el-table-column label="请求方法" prop="method" min-width="200" align="left" header-align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.method ? scope.row.method : '路径：'+scope.row.uri+'()' }}
          </template>
        </el-table-column>
        <el-table-column label="请求方式" prop="requestType" width="80" align="center" column-key="requestType" :filter-multiple="false" :filters="requestTypes" />
        <el-table-column align="center" prop="userName" sortable label=" 操作人员" width="150">
          <template slot-scope="scope">
            {{ scope.row.realName }}
            <span v-if="scope.row.userName" class="color-primary">({{ scope.row.userName }})</span>
          </template>
        </el-table-column>
        <el-table-column label="主机" prop="ip" width="200" align="left" />
        <el-table-column label="系统名称" prop="systemName" width="140" align="center" />
        <el-table-column align="center" prop="startTime" sortable label=" 发生时间" width="150">
          <template slot-scope="scope">{{ scope.row.gmtCreated | formatDate }}</template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination_handler">
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
    </div>
    <model-dialog
      title="日志详情"
      :visible.sync="dialogVisible"
      width="600px"
      :show-close="false"
      @close="dialogVisible=!dialogVisible">
      <div class="logDetails">
        <el-row class="item" :gutter="10">
          <el-col :span="12">
            状态:
            <span v-if="systemExceptionLog.dealStatus=== 0 " class="color-danger">未处理</span>
            <span v-else class="color-primary"> 已处理 </span>
          </el-col>
          <el-col v-if="systemExceptionLog.dealStatus=== 1 " :span="12">
            处理人：{{ systemExceptionLog.dealUserInfo }}
          </el-col>
        </el-row>
        <el-row v-if="systemExceptionLog.dealStatus=== 1 " class="item" :gutter="10">
          <el-col :span="24">
            处理结果：<span class="color-primary">{{ systemExceptionLog.dealDesc }}</span>
          </el-col>
        </el-row>
        <el-row class="item" :gutter="10">
          <el-col :span="24">
            错误描述：<span class="color-danger">{{ systemExceptionLog.description }}</span>
          </el-col>
        </el-row>
        <el-row class="item" :gutter="10">
          <el-col :span="12">
            请求码：{{ systemExceptionLog.requestId }}
          </el-col>
          <el-col :span="12">
            发生时间：{{ systemExceptionLog.gmtCreated | formatDate }}
          </el-col>
        </el-row>
        <el-row class="item" :gutter="10">
          <el-col :span="12">
            请求方式：{{ systemExceptionLog.requestType }}
          </el-col>
          <el-col :span="12">
            操作人员：{{ systemExceptionLog.userName }}{{ systemExceptionLog.realName }}
          </el-col>
        </el-row>
        <el-row class="item" :gutter="10">
          <el-col :span="12">
            主机：{{ systemExceptionLog.ip }}
          </el-col>
          <el-col :span="12">
            系统名称：{{ systemExceptionLog.systemName }}
          </el-col>
        </el-row>
        <el-row class="item" :gutter="10">
          <el-col :span="24">
            请求接口：{{ systemExceptionLog.basePath }}{{ systemExceptionLog.uri }}
          </el-col>
        </el-row>

        <el-row class="item" :gutter="10">
          <el-col :span="24">
            请求参数：{{ systemExceptionLog.parameter }}
          </el-col>
        </el-row>
        <el-row class="item" :gutter="10">
          <el-col :span="24">
            浏览器标识：{{ systemExceptionLog.userAgent }}
          </el-col>
        </el-row>
        <el-row class="item" :gutter="10">
          <el-col :span="24">
            发生位置：{{ systemExceptionLog.method }}
          </el-col>
        </el-row>
        <el-row class="item" :gutter="10">
          <el-col :span="24">
            异常类：{{ systemExceptionLog.errorClass }}
          </el-col>
        </el-row>
        <el-row class="item" :gutter="10">
          <el-col :span="24">
            错误栈：
            <span class="color-danger">{{ systemExceptionLog.errorLocalizedMessage }}</span>
          </el-col>
        </el-row>
      </div>
    </model-dialog>
    <model-dialog
      title="异常解决"
      :visible.sync="dealExceptionDialogVisible"
      width="600px"
      @close="dealExceptionDialogVisible=!dealExceptionDialogVisible">
      <el-form
        ref="dataForm"
        :model="systemExceptionLog"
        label-width="120px">
        <el-form-item label="处理人:" prop="dealUserInfo">
          <el-input v-model="systemExceptionLog.dealUserInfo" />
        </el-form-item>
        <el-form-item label="处理结果:" prop="dealDesc">
          <el-input
            v-model="systemExceptionLog.dealDesc"
            :rows="6"
            type="textarea"
            maxlength="1000"
            show-word-limit
            placeholder="请输入" />
        </el-form-item>
        <el-form-item label="描述:" prop="description">
          <span class="color-danger">{{ systemExceptionLog.description }}</span>
        </el-form-item>
        <el-form-item label="错误栈:" prop="errorLocalizedMessage">
          <span class="color-danger">{{ systemExceptionLog.errorLocalizedMessage }}</span>
        </el-form-item>
      </el-form>

      <template slot="footer">
        <el-button type="primary" @click="dealException">确 定</el-button>
      </template>
    </model-dialog>
  </div>
</template>
<script>
export default {

  components: { },

  data() {
    return {
      systemExceptionLogs: [],
      systemExceptionLog: {},
      total: 0,
      listQuery: {
        page: 1,
        limit: this.common.PAGE_LIMIT_DEFAULT,
        sort: this.common.SORT_DEFAULT,
        userName: '',
        realName: '',
        ip: '',
        requestType: ''
      },
      dateTime: [],

      multipleSelectionRecords: [],
      dialogVisible: false,

      requestTypes: [
        { value: 'GET', text: 'GET' },
        { value: 'POST', text: 'POST' }
      ],
      dealExceptionDialogVisible: false
    }
  },
  watch: {

  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      if (this.dateTime.length > 0) {
        this.listQuery.startTime = this.dateTime[0]
        this.listQuery.endTime = this.dateTime[1]
      }
      const response = await this.$store.dispatch('systemExceptionLogPage', this.listQuery)
      this.systemExceptionLogs = response.records
      this.total = response.total
    },
    /**
     * 全选/反选
     */
    handleSelectionChange(val) {
      this.multipleSelectionRecords = val
    },
    // 固定写法
    sortChange(data) {
      const { prop, order } = data
      if (prop) {
        if (order === 'ascending') {
          this.listQuery.sort = '+' + prop
        } else {
          this.listQuery.sort = '-' + prop
        }
      } else {
        this.listQuery.sort = this.common.SORT_DEFAULT
      }
      this.handleFilter()
    },
    /**
     * 搜索
     */
    handleFilter() {
      this.listQuery.page = 1
      this.fetchData()
    },
    handleFilterHandler(filters) {
      if (filters.requestType) {
        this.listQuery.requestType = filters.requestType.join(',')
      }

      this.listQuery.page = 1
      this.fetchData()
    },
    handleRowClick(row) {
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    /**
     * 重置
     */
    handleReset() {
      this.dateTime = []
      this.listQuery = {
        ...this.listQuery,
        page: 1,
        limit: this.common.PAGE_LIMIT_DEFAULT,
        sort: this.common.SORT_DEFAULT,
        userName: '',
        realName: '',
        ip: '',
        requestType: ''
      }
      this.handleFilter()
    },
    handleRemoveSingle(row) {
      this.multipleSelectionRecords = []
      this.multipleSelectionRecords.push(row)
      this.$refs.multipleTable.clearSelection()
      this.$refs.multipleTable.toggleRowSelection(row, true)
      this.removeRecord()
    },
    removeRecord() {
      if (this.multipleSelectionRecords.length > 0) {
        const ids = []
        this.multipleSelectionRecords.forEach(function(v, i) {
          ids.push(v.id)
        })
        this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('systemExceptionLogRemove', ids).then(response => {
            this.handleFilter()
            this.msgSuccess('删除成功')
          }).catch(() => {})
        }).catch(() => {
        })
      } else {
        this.msgWarning('请选择要删除的记录')
      }
    },
    clearRecord() {
      this.$confirm('此操作将清空所有数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('systemExceptionLogClear').then(response => {
          this.handleFilter()
          this.msgSuccess('清空完成')
        }).catch(() => {})
      }).catch(() => {
      })
    },
    handleLook(id) {
      this.dialogVisible = true
      this.$store.dispatch('systemExceptionLogGetById', id).then((res) => {
        this.systemExceptionLog = res
      }).catch((_) => {})
    },
    handleDealExceptionLog(row) {
      this.dealExceptionDialogVisible = true
      this.systemExceptionLog = {
        ...row,
        dealUserInfo: this.userInfo.realName + '|' + this.userInfo.mobile,
        dealDesc: `${this.T.formatDate(new Date().getTime(), this.T.DATE_TIME_FMT)} 已处理,*****造成`
      }
    },
    dealException() {
      if (!this.systemExceptionLog.dealUserInfo) {
        this.msgWarning('请填写处理人信息')
        return
      }
      if (!this.systemExceptionLog.dealDesc) {
        this.msgWarning('请填写处理人结果')
        return
      }
      this.$store.dispatch('systemExceptionLogDeal', this.systemExceptionLog).then((res) => {
        this.dealExceptionDialogVisible = false
        this.fetchData()
      }).catch((_) => {})
    }

  }
}
</script>

<style lang="scss" >
 .logDetails{
    margin-top: 15px;
    .item{
      margin-bottom: 12px;
      font-size: 14px;
      font-weight: 500;
      color: #333;
    }
  }
</style>
